<!DOCTYPE html>
<html>
<head>
	<title>检车项目接口调用页面</title>
	<meta charset="utf-8">
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
	<div class="col-sm-12"><h3>api接口调用</h3></div>

	<!-- 实际提交的表单 -->
	<form action="./row.php" method="post" class="subform" style="display: none;"></form>

	<!-- 表单 -->
	<form class="form-horizontal">
		
		<div class="row_container">
			<div class="row">
				<div class="col-sm-8">
					<div class="form-group">
						<label class="col-sm-2 control-label">请求地址</label>
						<div class="col-sm-10">
							<input name="posturl" type="text" class="form-control">
						</div>
					</div>
				</div>
			</div>
			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

			<div class="row thisrow">
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数名</label>
						<div class="col-sm-8">
							<input name="tar" type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">参数值</label>
						<div class="col-sm-8">
							<input name="val" type="text" class="form-control">
						</div>
					</div>
				</div>
				<!-- 删除按钮 -->
				<div class="col-sm-4">
					<button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button>
				</div>	
			</div>

		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="button" onclick="add_row()" class="btn btn-info">添加</button>
				<button type="button" onclick="subform()" class="btn btn-success">提交</button>
				<button type="button" onclick="ajaxsub()" class="btn btn-default">异步提交</button>
			</div>
		</div>

	</form>

</div>
<!-- json数据 -->
<div class="row">
	<div class="col-sm-10">
		<input name="json" type="text" class="form-control jsondata">
	</div>
	<div class="col-sm-2">
		<button type="button" onclick="jsondecode()" class="btn btn-warning">json解析</button>
	</div>
</div>
<!-- json数据 结束 -->
<!-- 数据打印台 -->
<div class="row">
	<pre><div class='res'></div></pre>
</div>
<!-- 数据打印台 结束 -->
</div>
</body>
<script type="text/javascript">
	// 删除行
	function delthisrow(that){
		$(that).parents('.thisrow').remove();
	}
	// 添加行
	function add_row(){
		var add_str = '<div class="row thisrow"><div class="col-sm-4"><div class="form-group"><label class="col-sm-4 control-label">参数名</label><div class="col-sm-8"><input name="tar" type="text" class="form-control"></div></div></div><div class="col-sm-4"><div class="form-group"><label class="col-sm-4 control-label">参数值</label><div class="col-sm-8"><input name="val" type="text" class="form-control"></div></div></div><div class="col-sm-4"><button type="button" onclick="delthisrow(this)" class="btn btn-danger">删除</button></div></div>';
		$('.row_container').append(add_str);
	}
	// 提交表单
	function subform(){
		// 处理表单
		var inptar = $('.thisrow');
		var str = "";
		for (var i = 0; i < inptar.length; i++) {
			var subtar = $(inptar[i]).find('input[name="tar"]').val();
			var subval = $(inptar[i]).find('input[name="val"]').val();
			str += "<input name='"+subtar+"' value='"+subval+"'>";
		}
		var posturl = $('.row_container input[name="posturl"]').val();
		posturl = posturl == '' ? './row.php' : posturl ;
		$('.subform').attr('action', posturl);
		$('.subform').append(str);
		// 提交表单
		$('.subform').submit();
	}
	// 异步提交表单
	function ajaxsub(){
		// 处理表单
		var inptar = $('.thisrow');
		var str = "";
		for (var i = 0; i < inptar.length; i++) {
			var subtar = $(inptar[i]).find('input[name="tar"]').val();
			var subval = $(inptar[i]).find('input[name="val"]').val();
			str += "<input name='"+subtar+"' value='"+subval+"'>";
		}
		var posturl = $('.row_container input[name="posturl"]').val();
		posturl = posturl == '' ? './row.php' : posturl ;
		$('.subform').attr('action', posturl);
		$('.subform').append(str);
		// 异步提交表单
		$.post(posturl, $('.subform').serialize(), function(data){
			if(data != ''){
				$('.res').html(data);
			}
		});
	}
	// 解析json数据
	function jsondecode(){
		// 获取要解析的json字符串
		var jsonval = $('.jsondata').val();
		// 提交到PHP后台解析处理
		$.post("./json_decode.php", {json:jsonval}, function(data){
			if(data != ''){
				$('.res').html(data);
			}
		});
	}
</script>
</html>